* {
    margin: 0;
    padding: 0;
}

body {
    background: black;
    
}

.app {
    background-image: url(./images/card3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 4px -193px;
    position: relative;
    margin: 200px auto;
    width: 400px;
    height: 400px;
    border-radius: 999px 0 999px 0;
    transform: rotate(-45deg);


    .petal01,
    .petal02,
    .petal03,
    .petal04,
    .petal05,
    .petal06 {
        position: absolute;
        left: 0;
        top: 0;
        width: 400px;
        height: 400px;
        border-radius: 999px 0 999px 0;
        background-color: pink;
        transform-origin: bottom left;
        transition: 2s;
        transform: rotate(0deg);
        opacity: 0.3;
    }

    &:hover .petal01 {
       
        transform: rotate(30deg);
        
    }
    &:hover .petal02 {
       
        transform: rotate(60deg);
        
    }
    &:hover .petal03 {
       
        transform: rotate(90deg);
        
    }
    &:hover .petal04 {
       
        transform: rotate(-30deg);
        
    }
    &:hover .petal05 {
       
        transform: rotate(-60deg);
        
    }
    &:hover .petal06 {
       
        transform: rotate(-90deg);
        
    }


}
